<template>
	<div class="reply">
		<!-- 1.0 头部导航结构 -->
		<Myheader title="精彩跟帖" :show="false"></Myheader>
		<!-- 2.0 评论列表 -->
		<van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">
			<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
				<div class="list">
					<div class="item" v-for="item in commentList" :key="item.id">
						<!-- 2.1 评论头部 - 用户信息 -->
						<div class="item-header" @click="replyFn(item)">
							<van-image round class="avatar" :src="item.user.head_img | imgUrl" />
							<div class="info">
								<p class="username">{{ item.user.nickname }}</p>
								<p class="date">{{ item.create_date | formatTime }}</p>
							</div>
							<span class="reply">回复</span>
						</div>
						<!-- 🔔 2.2 父评论内容 - 被回复的评论  -->
						<Myreplyitem v-if="item.parent" :parent="item.parent" @parentreply="replyFn"></Myreplyitem>
						<!-- 2.3 评论底部 - 评论内容 -->
						<div class="item-footer">
							<p class="content">{{ item.content }}</p>
						</div>
					</div>
					<!-- 空 -->
					<van-empty description="空空如也" v-if="commentList.length === 0" />
				</div>
			</van-list>
		</van-pull-refresh>

		<!-- 底部评论 -->
		<Mycomment :postDetail="postDetail" @refresh="refreshFn" ref="mc" :commentobj="temp" @reset="temp = null"></Mycomment>
	</div>
</template>

<script>
import {getPostCommentByIdAPI, getpostDetailAPI} from "@/apis/News";
import Myheader from "@/components/Myheader.vue";
import Myreplyitem from "@/components/Myreplyitem.vue";
import Mycomment from "@/components/Mycomment.vue";
export default {
	components: {
		Myheader,
		Myreplyitem,
		Mycomment,
	},
	data() {
		return {
			id: this.$route.query.id,
			commentList: [],
			postDetail: {},
			temp: null, // 为null时表示回复的是文章  传入评论对象则为回复某个人
			loading: false,
			finished: false,
			pageIndex: 1,
			pageSize: 10,
			isLoading: false,
		};
	},
	async created() {
		// 获取文章 id， id为1的文章有一些的评论数据。
		// const id = this.$route.query.id;
		// console.log(id);
		// 根据文章 id 获取文章的评论列表
		// const res = await getPostCommentByIdAPI(id);
		// console.log(res.data.data);
		// this.commentList = res.data.data;
		this.getcommentList();
		const res2 = await getpostDetailAPI(this.id);
		this.postDetail = res2.data.data;
	},
	methods: {
		// 下拉刷新时触发的函数
		onRefresh() {
			this.pageIndex = 1; // 页码重置
			this.commentList = []; // 重置数组
			this.finished = false; // 隐藏没有更多了的提示 - 可以继续分页加载
			this.loading = true; // 重新加载数据
			// 将 loading 设置为 true，表示处于加载状态

			this.getcommentList();
		},
		onLoad() {
			this.pageIndex++;
			this.getcommentList();
		},
		async getcommentList() {
			const res = await getPostCommentByIdAPI(this.id, {
				pageIndex: this.pageIndex,
				pageSize: this.pageSize,
			});
			console.log(res.data.data);
			if (res.data.data.length === 0) return (this.finished = true);
			this.commentList.push(...res.data.data);
			this.loading = false;
			this.isLoading = false;
		},
		refreshFn() {
			// console.log("父组件上的 commentList 评论列表需要重新获取");
			this.onRefresh(); // 💥 因为有分页，重置所有数据
			// this.getcommentList(); // 因为有分页了 所以需要重置 直接使用下拉刷新的函数
			// 小马滚动
			// document.documentElement.scrollTop = 0;
			// 平滑滚动 - 手机端可用
			//原生 滚动到顶部  平滑的 🎈小技巧
			window.scrollTo({
				top: 0,
				behavior: "smooth",
			});
			this.temp = null; // 发布成功后，清空回复对象，设置为 null，回复文章
		},
		replyFn(item) {
			// 🔔 通过 ref 找到组件实例，调用组件内的方法实现展示文本域
			console.log(111);
			this.$refs.mc.inputFn(); //杰哥的思路
			// this.$refs.mc.isActive = true; 我的
			this.temp = item; // 把当前评论对象传递给底部评论组件内
			console.log(this.temp);
		},
	},
};
</script>

<style lang="less" scoped>
.list {
	// padding-bottom: 50px;
	.item {
		border-bottom: 1px solid #ddd;
		padding: 10px;
		.item-header {
			display: flex;
			position: relative;
			z-index: 10;
			.avatar {
				width: 50px;
				height: 50px;
				margin-right: 10px;
			}
			.info {
				flex: 1;
				padding: 6px 0;
				.username {
					font-size: 16px;
					margin-bottom: 4px;
				}
				.date {
					font-size: 13px;
					color: #666;
				}
			}
		}

		.reply {
			font-size: 14px;
			color: #666;
			// position: relative;
			// z-index: 10;
		}

		.item-footer {
			.content {
				margin: 10px 0;
			}
		}
	}
}
</style>
